<script lang="ts" setup>
import type { homePageDocItem } from '@/types/home'
// import { likePost } from '@/api/home'
// import { showSuccessToast } from 'vant'
// import { ref } from 'vue'
import { useLike } from '@/composable/index'

defineProps<{
  item: homePageDocItem
}>()

const { loading, likeClick } = useLike()
/*
  关注
  1：定义接口api
  2:导入api
  3:点击按钮调用api
  4:处理数据类型
  5：调用完成
     提示
     修改文字状态
*/
</script>
<template>
  <div class="doctor-card">
    <van-image round :src="item.avatar" />
    <p class="name">{{ item.name }}</p>
    <p class="van-ellipsis">{{ item.hospitalName }} {{ item.depName }}</p>
    <p>{{ item.positionalTitles }}</p>
    <van-button :loading="loading" round size="small" type="primary" @click="likeClick(item)"
      >+ {{ item.likeFlag === 1 ? '已关注' : '关注' }}</van-button
    >
  </div>
</template>
<style scoped lang="scss">
.doctor-card {
  width: 135px;
  height: 190px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 0px 11px 0px rgba(229, 229, 229, 0.2);
  text-align: center;
  padding: 15px;
  margin-left: 15px;
  display: inline-block;
  box-sizing: border-box;
  > .van-image {
    width: 58px;
    height: 58px;
    vertical-align: top;
    border-radius: 50%;
    margin: 0 auto 8px;
  }
  > p {
    margin-bottom: 0;
    font-size: 11px;
    color: var(--cp-tip);
    &.name {
      font-size: 13px;
      color: var(--cp-text1);
      margin-bottom: 5px;
    }
  }
  > .van-button {
    padding: 0 12px;
    height: 28px;
    margin-top: 8px;
    width: 72px;
  }
}
</style>
